<template>
    <div class="voiceTOtext">
        <div class="navtitle">
            <span>我的权益</span><img src="@/assets/images/arrow-right.png" /><span>实时语音转文本</span>
        </div>
        <div class="tit">
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       实时字幕用于实时内容，如新闻或体育广播。在实时直播期间，最好将单词的口述时间与字词出现在字幕中之间的延迟降到最低。通过使用 “识别”事件，结果字词在朗读时以增量方式添加。使用识别事件时，可能需要在增加显示下一个词的延迟和减少字幕中已经出现的词的变化之间做出权衡。可以使用“阈值”参数，用于生成更稳定的部分结果。将此参数设置为 3 是我们建议的默认值，这会稍微延迟字词的显示速度，但会显著降低更改已显示字词的几率。
        </div>
        <div class="woded">
            我的额度(单位:分钟)
        </div>
        <div class="edcontent">
            <div><span>额度：1000</span>
            <span>剩余：900</span></div>
            <el-button type="primary" >充值</el-button>
        </div>
        <div class="shiting">选择语言</div>
        <div>
            <el-select v-model="value" placeholder="请选择" style="margin-right: 15px;">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

        </div>
        <div class="content">
            <div class="content-left">
                <div class="top">选择音频文件</div>
                <div class="box">
                    <!-- <p>将.WAV格式的音频文件(16kHz或者8kHz，16位和单声道PCM)文件上传</p> -->
                   <!-- <p> <a>浏览文件...</a></p> -->
                   <p><img src="@/assets/images/ht2.png" v-if="blnStarted" /> <img src="@/assets/images/ht1.png" v-else   /></p>
                 <p>  <a href="javascript:void(0)" @click="getVoice()"><span v-if="!blnStarted">使用麦克风实时识别</span><span v-else >停止识别</span></a></p>
                </div>
            </div>
            <div class="content-right">
                <div class="top">对照文字</div>
                <div class="box">

                </div>
               
            </div>
        </div>
        <div class="content-b">
            <div class="top">评估结果</div>
            <div class="box">
                <audio controls style="width:100%">
                <source src="horse.mp3" type="audio/mpeg">
                <source src="horse.ogg" type="audio/ogg">
                Your browser does not support this audio format.
                </audio>
            </div>
        </div>
    </div>
</template>
<script>
 import {
  getsubscription,updateusage,getvoicetotextlan,VoiceToTextGetusage

} from "@/api/index"
const speechsdk = require("microsoft-cognitiveservices-speech-sdk");
 
export default {
    data() {
      return {
        radio4: '1',
        textData:'',
        textarea:'',
        textarea1:'',
        blnStarted:false,
        options: [],
        value: '',
        subscriptionKey:'',
         serviceRegion:'',
         SpeechSDK :null,
         recognizer:null,
         timer:null,
         quota:'',
usage:'',

      }
    },
    methods:{
      clear(){
        this.textData=''
      },
      voiceToTextGetusage(){
        VoiceToTextGetusage().then(res=>{
          console.log(res);
         this.quota=res.data.quota
         this.usage=res.data.usage
 
        })
      },
     changeSle(value){
      console.log(value)
      
     },
      getSubscription(){
        getsubscription().then(res=>{
          console.log(res)
          this.subscriptionKey=res.data[0]
          this.serviceRegion=res.data[1]
        })
      },
      upDateusage(){
        let data={
          lan:this.value,
          result:this.textData,
          time:new Date().getTime()

        }
        updateusage(data).then(res=>{
          console.log(res)
        })
      },
      getVoicetotextlan(){
        getvoicetotextlan().then(res=>{
          this.options=res.data
        })
      },
      async getVoice() {
        if(this.value==''){
          this.$message({
                    message: '请选择语言',
                    type: 'info'
                })
                return
        }
        if(+this.quota-this.usage<=0){
          this.$message({
                    message: '请充值',
                    type: 'info'
                })
                return
        }
      // const tokenObj = await getTokenOrRefresh();
      // const speechConfig = speechsdk.SpeechConfig.fromAuthorizationToken(
      //   tokenObj.authToken,
      //   tokenObj.region
      // );
console.log(  this.subscriptionKey,
        this.serviceRegion)
      var speechConfig = speechsdk.SpeechConfig.fromSubscription(
        this.subscriptionKey,
        this.serviceRegion
      );
      let that = this;
      speechConfig.speechRecognitionLanguage = this.value;
      console.log("12222", speechConfig);
      const audioConfig = speechsdk.AudioConfig.fromDefaultMicrophoneInput();
      console.log("455", audioConfig);

      if (this.blnStarted) {
        console.log(this.blnStarted);
        this.recognizer.stopContinuousRecognitionAsync(
          function (result) {
            console.log("9999", result);
            that.blnStarted = false;
            console.log("7888", that.blnStarted);
            that.recognizer.close();

            that.recognizer = undefined;
            clearInterval(that.timer);
          },
          function (err) {
            console.log(err);
            that.blnStarted = false;
            console.log("7888", that.blnStarted);
            that.recognizer.close();
            that.recognizer = undefined;
          }
        );
        return false;
      } else {
        this.recognizer = new speechsdk.SpeechRecognizer(
          speechConfig,
          audioConfig
        );
        this.recognizer.recognized = function (item, result) {
          console.log("tretert", result);
          if (result?.privResult?.privText === undefined) return;
          that.textData += result?.privResult?.privText;
        };
        this.recognizer.startContinuousRecognitionAsync(
          function (result) {
            console.log(result);
            // phraseDiv.innerHTML += "初始化成功";
            // startRecognizeOnceAsyncButton.innerHTML = "停止";
            that.blnStarted = true;
            that.timer = setInterval(() => {
              //定时器开始
              that.upDateusage()
            }, 1000);
          },
          function (err) {
            console.log(err);
            that.textData = err;
            window.console.log(err);

            that.recognizer.close();
            that.recognizer = undefined;
          }
        );
      }

      // recognizer.startContinuousRecognitionAsync(
      //   function (result) {
      //     console.log("999", recognizer);
      //     recognizer.close();
      //     recognizer = undefined;
      //   }
      //   // function (err) {
      //   //   console.trace("err - " + err);

      //   //   recognizer.close();
      //   //   recognizer = undefined;
      //   // }
      // );

      //  this.textData = "ddf";
      // this.setState({
      //   displayText: "speak into your microphone...",
      // });

      // recognizer.recognizeOnceAsync(async (result) => {
      //   console.log(await result);
      //   let displayText;
      //   if (result.reason === ResultReason.RecognizedSpeech) {
      //     displayText = `RECOGNIZED: Text=${result.text}`;
      //   } else {
      //     displayText =
      //       "ERROR: Speech was cancelled or could not be recognized. Ensure your microphone is working properly.";
      //   }
      //   this.textData = displayText;
      //   // this.setState({
      //   //   displayText: displayText,
      //   // });
      // });

      // recognizer.startContinuousRecognitionAsync(
      //   function (result) {
      //     console.log(12312);
      //     console.log(result);
      //     this.blnStarted = true;
      //   },
      //   function (err) {
      //     console.log(err);
      //     console.log(343434);
      //     this.textData = err;
      //     window.console.log(err);
      //     console.log(err);

      //     delete this.recognizer;
      //   }
      // );

      // console.log(speechsdk);
      // let speechConfig = speechsdk.SpeechConfig.fromSubscription(
      //   this.subscriptionKey,
      //   this.serviceRegion
      // );

      // const audioConfig = speechsdk.AudioConfig.fromDefaultMicrophoneInput();
      // const recognizer = new speechsdk.SpeechRecognizer(
      //   speechConfig,
      //   audioConfig
      // );
      // console.log(recognizer);
      // console.log(recognizer.recognizeOnceAsync);
      // // console.log(ResultReason);
      // recognizer.recognizeOnceAsync((result, err) => {
      //   console.log(result);
      //   console.log(err);
      //   let displayText;
      //   // if (result.reason === ResultReason.RecognizedSpeech) {
      //   //   // displayText = `RECOGNIZED: Text=${result.text}`;
      //   //   console.log(result.text);
      //   // } else {
      //   //   displayText =
      //   //     "ERROR: Speech was cancelled or could not be recognized. Ensure your microphone is working properly.";
      //   // }

      //   // this.setState({
      //   //   displayText: displayText,
      //   // });
      // });

      // if (this.blnStarted) {
      //   this.recognizer.stopContinuousRecognitionAsync(function (result) {
      //     delete this.recognizer;

      //     this.blnStarted = false;
      //   });
      // } else {
      //   if (
      //     this.subscriptionKey === "" ||
      //     this.subscriptionKey === "subscription"
      //   ) {
      //     alert(
      //       "Please enter your Microsoft Cognitive Services Speech subscription key!"
      //     );
      //     return;
      //   }
      //   let speechConfig = this.SpeechSDK.SpeechConfig.fromSubscription(
      //     this.subscriptionKey,
      //     this.serviceRegion
      //   );
      //   speechConfig.speechRecognitionLanguage = "zh-CN";
      //   let audioConfig =
      //     this.SpeechSDK.AudioConfig.fromDefaultMicrophoneInput();
      //   console.log(audioConfig);
      //   this.recognizer = new this.SpeechSDK.SpeechRecognizer(
      //     speechConfig,
      //     audioConfig
      //   );
      //   // this.recognizer.recognizing = this.recognizer.recognized = recognizerCallback.bind(this)
      //   // // start the recognizer
      //   // this._recognizer.startContinuousRecognitionAsync()
      //   this.recognizer.recognized = function (item, result) {
      //     console.log(1212);
      //     if (result?.privResult?.privText === undefined) return;
      //     this.textData = result?.privResult?.privText;
      //     console.log(this.textData);
      //     window.console.log(result?.privResult?.privText);
      //   };
      //   console.log(this.recognizer.startContinuousRecognitionAsync);
      //   // this.recognizer.recognizeOnceAsync(result => {
      //   //     let displayText;
      //   //     if (result.reason === ResultReason.RecognizedSpeech) {
      //   //         displayText = `RECOGNIZED: Text=${result.text}`
      //   //     } else {
      //   //         displayText = 'ERROR: Speech was cancelled or could not be recognized. Ensure your microphone is working properly.';
      //   //     }

      //   //     this.setState({
      //   //         displayText: displayText
      //   //     });
      //   // });
      //   // assign callback when text is recognized ('recognizing' is a partial result)
      //   this.recognizer.recognizing = this.recognizer.recognized =
      //     recognizerCallback.bind(this);
      //   // start the recognizer
      //   // this._recognizer.startContinuousRecognitionAsync()
      //   this.recognizer.startContinuousRecognitionAsync(
      //     function (result) {
      //       console.log(12312);
      //       console.log(result);
      //       this.blnStarted = true;
      //     },
      //     function (err) {
      //       console.log(err);
      //       console.log(343434);
      //       this.textData = err;
      //       window.console.log(err);
      //       console.log(err);

      //       delete this.recognizer;
      //     }
      //   );
      // }
    },
    },
    mounted(){
      this.getSubscription()
      this.getVoicetotextlan()
      this.voiceToTextGetusage()
      //  console.log(!!window.SpeechSDK)
    }
}
</script>
<style lang="less" scoped>
.voiceTOtext{
    .box-center{
    margin-top:25px;
    .tip{
        display: inline-block;
        background: #fff;
        font-size: 14px;
        color:rgba(56,23,129,1);
        border-radius: 13px;
        border: solid 1px #707070;
       padding:5px 14px;
       margin-bottom: 10px;
       
    }

}
 
   .navtitle{
    padding-top:10px;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
     span{
        font-size: 26px;
        font-weight: bold;
        color:rgba(56,23,129,1)
     }
     img{
        width: 14px;
        height: 24px;
        margin:0 5px;
     }
   }
   .tit{
    height: 132px;
    box-sizing: border-box;
    padding:20px 10px;
    background:#E9ECEF;
    font-size: 16px;;
    color:rgba(56,23,129,1);
    line-height: 28px;
   }
   .woded{
    padding-top:10px;
    padding-bottom: 15px;
    font-size: 20px;;
    font-weight: bold;
    color:rgba(56,23,129,1);
   }
   .edcontent{
    width: 334px;
    height: 55px;
    display: inline-block;
    background: #E9ECEF;
    display: flex;
    align-items: center;
    padding:5px 5px 5px 10px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    span{
        font-size: 16px;
        font-weight: bold;
        color:rgba(56,23,129,1);
        &.cz{

        }

    }
   }
   .shiting{
    font-size: 20px;;
    color:rgba(56,23,129,1);
    padding:7px;
    font-weight: bold;
   }
   .content{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 30px;
    .top{
        font-size: 14px;
        font-weight: bold;
    }
    .content-left{
       
      
       .box{
        width: 418px;
        height: 271px;
        border: dashed 1px #707070;
        background: #F1F0EF;
       padding:30px 10px;
       box-sizing: border-box;
       text-align: center;
       }
        p{
            font-size: 20px;
            color: #000;
            margin-bottom: 15px;
            a{
                color: #4019E5;
            }
        }
    }
    .content-right{
      
      
        .box{
            width: 774px;
            height: 271px;
        border: solid 1px #707070;
        }
    }
   }
   .content-b{
   
        .top{
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .box{
        border: solid 1px #707070;
    }
    
   }
}
</style>